<template>
	<!-- //故障报修 -->
	<view class="pages">
		<view class="tabBar">
			<view :class="['itemsTOp',data.indexOf == item.id?'selectClass':'']" v-for="(item,index) in data.tableList"
				:key="index" @click="handleTab(item.id)">
				{{item.text}}
				<view class="lins" v-if="item.id == data.indexOf"></view>
			</view>
		</view>
		<view class="card" v-for="(item,index) in formDataList" :key="index">
			<view @click="handleJump(item.id)">
				<view class="list">
					<text class="title">订单编号：</text>
					<text class="text">{{item.maintenanceNo}}</text>
				</view>
				<view class="list">
					<text class="title">报修时间：</text>
					<text class="text">{{item.createdTime}}</text>
				</view>
				<view class="list">
					<text class="title">报修地址：</text>
					<text class="text">{{item.address}}</text>
				</view>
				<view class="list">
					<text class="title">报修类型：</text>
					<!-- <text class="text">{{showTypeName(item.maintenanceType)}}</text> -->
					<text class="text">{{item.maintenanceTypeName}}</text>
				</view>
				<view class="list">
					<text class="title">问题描述：</text>
					<text class="text">{{item.remark}}</text>
				</view>
				<view class="list">
					<text class="title">问题图片：</text>
					<view class="repaies_photo">
						<view class="photo" v-for="(ite,inde) in item.imageUrls" :key="inde">
							<image :src="ite" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="list" v-if="item.status == 2" style="padding-bottom:30rpx ;">
					<text class="title">修复时间：</text>
					<text class="text">{{item.uploadTime}}</text>
				</view>
				<!-- <view class="list" v-if="item.status == 3" style="padding-bottom:30rpx ;">
					<text class="title">取消说明：</text>
					<text class="text">已自行修复</text>
				</view> -->
			</view>
			<view class="line" v-if="item.status == 0 ||item.status == 1 " />
			<view class="handle_box" v-if="item.status == 0 ||item.status == 1  ">
				<view class="btn cancel_btn" v-if="item.status == 0 ||item.status == 1 " @click="handleCancel(item.id)">
					取消
				</view>
				<view class="btn complete_btn" v-if="item.status == 1" @click="handleRecovered(item.id)">
					已修复
				</view>
			</view>
			<!-- old：0-待处理, 1-待管理员确认，2-已完成，3-已取消, 4-待支付 -->
			<!-- new 0-待处理、1-处理中、2-已修复、3-待支付、4-已完成、5-已取消 -->
			<image src="/pagesA/static/hoom/daichuli.png" mode="aspectFit" class="state_icon" v-if="item.status == 0">
			</image>
			<image src="/pagesA/static/hoom/shenhe.png" mode="aspectFit" class="state_icon" v-if="item.status == 1">
			</image>
			<image src="/pagesA/static/hoom/wancheng.png" mode="aspectFit" class="state_icon" v-if="item.status == 4">
			</image>
			<image src="/pagesA/static/hoom/4.png" mode="aspectFit" class="state_icon" v-if="item.status == 5">
			</image>
			<!-- <image src="/pagesA/static/hoom/4.png" mode="aspectFit" class="state_icon" v-if="item.status == 4">
			</image> -->
		</view>
		<view class="main dis" style="z-index: 9999;height: 80vh;" v-if="formDataList.length == 0">
			<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit"
					style="width: 200rpx;height: 200rpx;"></image>
				<text>暂无数据</text>
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="bottom_box">
			<view class="add_btn" @click="handleClick">
				提报故障
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		maintenancePage,
		maintenanceCancel,
		maintenanceConfirm,
		maintenanceTypes
	} from './js/api.js'
	import {
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import http from '../../uitls/http.js';
	const app = getApp()
	const data = reactive({
		tableList: [{
				id: -1,
				text: '全部',
			},
			{
				id: 0,
				text: '待处理'
			},
			{
				id: 4,
				text: '已完成'
			},
			{
				id: 5,
				text: '已取消'
			}
		],
		indexOf: -1,
		list: []
	})
	const handleClick = () => {
		if(app.globalData.realNameFlag){
			uni.navigateTo({
				url: '/pagesA/reportFaults/reportFaults'
			})
		}else{
			http.toAuth(0)
		}
		
	}
	const handleTab = (id) => {
		data.indexOf = id
		let states = id
		if(id<0) states = ''
		paramsData.pageNum = 1
		paramsData.status = states
		getListData()
	}
	const handleCancel = async (id) => {
		let res = await maintenanceCancel(id)
		if (res.data.code == 0) {
			http.isMssage('取消成功')
			paramsData.pageNum = 1
			getListData()
		} else {
			http.isMssage(res.data.message)
		}
	}
	const handleRecovered = async (id) => {
		let res = await maintenanceConfirm(id)
		if (res.data.code == 0) {
			http.isMssage('设置修复完成')
			paramsData.pageNum = 1
			getListData()
		} else {
			http.isMssage(res.data.message)
		}
	}
	const isReach = ref(true)
	const paramsData = reactive({
		pageNum: 1,
		pageSize: 10,
		status: ''
	})
	const formDataList = ref([])
	const getListData = async () => {
		let res = await maintenancePage(paramsData)
		console.log(res)
		let list = res.data.data.list
		if (paramsData.pageNum == 1) {
			formDataList.value = list
		} else {
			formDataList.value = formDataList.value.concat(list)
		}
		// 刷新完成后关闭下拉刷新状态
		uni.stopPullDownRefresh();
		if (list.length < 10) isReach.value = false
	}
	onReachBottom(() => {
		// console.log('上拉触底')
		if (!isReach.value) return
		paramsData.pageNum++
		getListData()
	})
	const mainTypeArray = ref([])
	const getMainTypeData = async () => {
		let res = await maintenanceTypes()
		console.log('res==maintenanceTypes', res)
		if (res.data.code == 0) {
			let data = res.data.data
			mainTypeArray.value = data
			// console.log('res==maintenanceTypes',res)
		}
	}
	const showTypeName = (id) => {
		let array = []
		let list = mainTypeArray.value
		array = list.filter(item => item.valueId == id)
		console.log('array===', array)
		return array[0]?.valueName || ''
	}
	const handleJump = (id) => {
		uni.navigateTo({
			url: '/pagesA/reportFaults/reportFaults?id=' + id
		})
	}
	onMounted(() => {
		// getMainTypeData()
	})
	onShow(() => {
		getListData()
	})
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.tabBar {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.itemsTOp {
			width: 33%;
			height: 100%;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #4E4E4E;
			text-align: center;
			line-height: 28rpx;
			font-weight: 400;
			// border: 1px solid;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.lins {
				background: #EE7930;
				border-radius: 5rpx;
				width: 36rpx;
				height: 4rpx;
				position: absolute;
				bottom: 0;
			}
		}

		.selectClass {
			font-family: PingFangSC-Semibold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			line-height: 28rpx;
			font-weight: 600;
		}
	}

	.card {
		position: relative;
		background: #FFFFFF;
		padding: 30rpx 30rpx 0 30rpx;
		margin-top: 16rpx;

		.list {
			display: flex;
			padding-bottom: 16rpx;

			.title {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #666666;
				line-height: 26rpx;
				font-weight: 400;
				width: 120rpx;
			}

			.text {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #000000;
				line-height: 26rpx;
				font-weight: 400;
			}

			.repaies_photo {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.photo {
					width: 80rpx;
					height: 80rpx;
					margin-right: 24rpx;
					border: 1rpx solid rgba(204, 204, 204, 1);
					border-radius: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;

					image {
						width: 100%;
					}
				}
			}
		}

		.handle_box {
			height: 86rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btn {
				height: 54rpx;
				width: 132rpx;
				line-height: 54rpx;
				text-align: center;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				font-weight: 400;
				border-radius: 8rpx;
			}

			.cancel_btn {
				border: 2rpx solid rgba(238, 121, 48, 1);
				color: #EE7930;
				margin-right: 16rpx;

			}

			.complete_btn {
				background: #EE7930;
				color: #FFFDFC;

			}
		}

		.state_icon {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			width: 90rpx;
			height: 90rpx;
		}
	}

	.line {
		background: #EEEEEE;
		height: 1rpx;
		// margin: 0 30rpx;
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;

		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>